<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>index</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>

<body>
    <!-- 头部 -->
    <div class="header">
        <!-- 最上方导航栏 -->
        <div class="nav">
            <div class="logo">
                <a class="ETH" href="./index.html">
                    <p class="ETH">ETH-Hardware</p>
                </a>
                <!-- <p class="ETH">ETH-Hardware</p> -->
            </div>
            <div class="menu_nav">
                <ul>
                    <li>
                        <a href="./html/blog.html">BLOG</a>
                    </li>
                    <li>
                        <a href="./html/contact.html">CONTACT</a>
                    </li>
                    <li>
                        <a href="./html/product.html">PRODUCT</a>
                    </li>
                    <li>
                        <a href="./html/about.html">ABOUT</a>
                    </li>
                    <li>
                        <a href="./index.html" style="background-color: #169bd5;" >HOME</a>
                    </li>
                </ul>
            </div>
        </div>
        
        <!-- 展示区域 -->
        <div  align="center" class="show">    
            <img class="eth1" src="./images/ETH-2.0-Beacon-Chain-Launch.jpg" alt="eth2" >

        </div>

        <!-- 展示区域 -->
        <div class="show">    
            <div class="find">
                <p class="Find">Find the product you need:</p>
                <p class="We">We have thousands of ETH Hardware for you</p>
                <!-- 搜索区域 -->
                <div class="search">
                    <tr>
                        <td>
                            <select name="Category" id="category">
                                <option value="Category" hidden>Category</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                            </select>
                            <select name="Product" id="product">
                                <option value="Product" hidden>Product</option>
                                <option value="1">1</option>
                                <option value="2">2</option>
                                <option value="3">3</option>
                                <input type="submit" value="GO">
                        </td>
                    </tr>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 内容 -->
    <div class="main">
        <hr>
        <p class="head">You can find almost any kind of ETH hardware:</p>
        <!-- 产品种类 -->
        <ul class="index">
            <li><img class="eth2" src="./images/eth2.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth2.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth2.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth2.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth2.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth2.jpg" alt="eth2" ></li>
        </ul>
    </div>
    <!-- 评价 -->
    <div class="mainside">
        <hr>
        <p class="head">80% of our friends chose these products and gave us a good evaluation:</p>
        <!-- 用户评价 -->
        <ul>
            <li><img class="eth2" src="./images/eth-evaluation.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth-evaluation.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth-evaluation.jpg" alt="eth2" ></li>
            <li><img class="eth2" src="./images/eth-evaluation.jpg" alt="eth2" ></li>
        </ul>
    </div>
    <hr>
    <!-- 工厂 -->

    <div class="sidebar">
        <div class="As">
            <p class="foot">As a factory located in Guangdong Province,
                <br />China, we have confidence in our products.
            </p>
        </div>
        <div class="factory">
            <ul>
                <li><img class="eth2" src="./images/2000px-Ethereum_logo.svg_.png" alt="eth2" ></li>
                <li><img class="eth2" src="./images/2000px-Ethereum_logo.svg_.png" alt="eth2" ></li>
            </ul>
        </div>
        <div class="We">
            <p class="footbottem">We are a production-oriented factory focusing on eth hardware,
                <br />located in Guangdong Province, China. We have more than 10
                <br />years of production experience in computer motherboard and
                <br />power supply.
            </p>
        </div>

        <div class="button">
            <button>BUTTON</button>
        </div>

    </div>
    <!-- 页脚 -->
    <div class="footer">
        <div class="bottomnav">
            <ul>
                <li class="last">
                    <a href="./html/blog.html">BLOG</a>
                </li>
                <li>
                    <a href="./html/contact.html">CONTACT</a>
                </li>
                <li>
                    <a href="./html/product.html">PRODUCT</a>
                </li>
                <li>
                    <a href="./html/about.html">ABOUT</a>
                </li>
                <li>
                    <a href="index.html" style="color: #169bd5;">HOME</a>
                </li>
            </ul>
        </div>
        <div class="button">
            <button>BUTTON</button>
        </div>
        <div class="link">
            <ul>
                <li><a href="https://www.linkedin.com" target="blank" title="linkedin">
                        <img src="images/linkedin.png" alt="linkedin" width="36px">
                    </a>
                </li>
                <li>
                    <a href="https://www.facebook.com" target="blank" title="facebook">
                        <img src="images/facebook.png" alt="facebook" width="36px">
                    </a>
                </li>
                <li>
                    <a href="https://www.youtube.com" target="blank" title="youtube">
                        <img src="images/youtube.png" alt="youtube" width="36px">
                    </a>
                </li>
            </ul>
        </div>
        <div class="copyright">
            <p class="copyright">
                Copyright @2021 All rights reserved | This template is made by Mr White
            </p>
        </div>
</body>

</html>